<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <div>
      <!-- 图片，用来展示用户选择的头像 -->
      <img :src="imgUrl" v-if="imgUrl" alt="" class="preview" />
      <img src="../../../assets/images/avatar.jpg" v-else alt="" class="preview" />

      <!-- 按钮区域 -->
      <div class="btn-box">
        <input type="file" style="display: none" ref="inputFile" @change="chooseImg" />
        <el-button type="primary" icon="el-icon-plus" @click="$refs.inputFile.click()">选择图片</el-button>
        <el-button type="success" icon="el-icon-upload" :disabled='imgUrl==="" '  @click="uplaodImg">上传头像</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'UserAvatar',
  data(){
    return{
      imgUrl:''
    }
  },
  methods:{
    //2.获取本地上传文件
    chooseImg(e){
      // 通过事件对象e.target.files  获取本地上传的文件列表
      // console.log(e)
      const filse = e.target.files
      if(filse.length){
        //选择图片
        // console.log(filse[0])
        //目标 将文件对象转化为 base64格式 的字符串   详解请查看  MD文档
        const reader = new FileReader();
        reader.readAsDataURL(filse[0])
        reader.addEventListener('load',()=>{
          // console.log('reader.result',   reader.result)
          //保存 base64格式的字符串
          this.imgUrl=reader.result
        })
      }else{
        // 没有选择图片
        this.imgUrl=''
      }
      
    },
    //3.开始上传头像
    //3.1  绑定事件上传头像
    async  uplaodImg(){
      //3.2发送请求实现图片上传
      const {data:res} =await this.$axios.patch('/my/update/avatar',{avatar	: this.imgUrl})
      // console.log(res)
      if(res.code !==0)return
      //3.3上传成功提示
      this.$message.success(res.message)
      //清空  data函数中的  imgUrl
      this.imgUrl=''
      //3.5 触发 vuex actions中的函数,重新获取用户信息  重新渲染页面
      this.$store.dispatch('iniUserInfo')
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
  width: 350px;
  height: 350px;
 
}
</style>  